import React from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';
import PropTypes from 'prop-types'

class UserModal extends React.Component {
  constructor() {
    super();
    this.state = {

    }
    this.menuClick = this.menuClick.bind(this)
  }
  componentDidMount() {
  }
  // menu点击事件
  menuClick(type) {
    // 改变类别
    this.props.menuChange(type);
  }
  render() {
    // 默认的菜单
    const menuList = [
      { type: '头条', title: '头条' },
      { type: '财经', title: '财经' },
      { type: '娱乐', title: '娱乐' },
      { type: '军事', title: '军事' },
      { type: '科技', title: '科技' },
      { type: '股票', title: '股票' },
      { type: '体育', title: '体育' },
      { type: '健康', title: '健康' },

    ];
    const linkStyle = { display: 'inline-block' }
    return (
      <Menu mode="horizontal" selectedKeys={[this.props.current]}>
        {menuList.map(item => (
          <Menu.Item key={item.type} onClick={() => this.menuClick(item.type)}>
            <Icon type="appstore" />
            <Link
              to={`/list/${encodeURIComponent(item.type)}`}
              style={linkStyle}
            >
              {item.title}
            </Link>
          </Menu.Item>
        ))}
      </Menu>
    )
  }
}
export default UserModal;
UserModal.propTypes = {
  menuChange: PropTypes.func,
  current: PropTypes.string,
}
